<template>
  <div class="charts_shadow" :style="{width:`${innerWidth*.477}px`,height: '100%'}">
    <div class="until_title_charts">每日进场劳务情况</div>
    <div ref="chartDOM" style="width: 100%;height: calc(100% - 35px)"></div>
  </div>
</template>

<script>
  import mixin from './../mixin'
  import {mapGetters} from 'vuex'
  export default {
    name: 'labor',
    mixins: [mixin],
    data () {
      return {
        laborInfo: []
      }
    },
    mounted () {
      this.getAttendanceDailyInfo()
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    watch: {
      currentUser (oldItem, newItem) {
        if (this.currentUser.mid) {
          this.getAttendanceDailyInfo()
        }
      }
    },
    methods: {
      init () {
        let chart = this.$echarts.init(this.$refs.chartDOM)
        let echartOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['人数', '人均工时'],
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          xAxis: [
            {
              type: 'category',
              data: this.laborInfo.map((item, index) => {
                return item.dataTime
              }),
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                color: '#a9c5ec' // 坐标轴文字颜色
              },
              axisLine: {  //  Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              axisLabel: {
                color: '#a9c5ec'
              },
              nameTextStyle: {
                color: '#a9c5ec'
              },
              axisLine: {   // Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2  // 这里是为了突出显示加上的
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitNumber: 4
            },
            {
              type: 'value',
              name: '人均工时',
              nameTextStyle: {
                color: '#a9c5ec'
              },
              // interval: 1,
              axisLabel: {
                color: '#a9c5ec'
              },
              axisLine: {  //  Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2 //  这里是为了突出显示加上的
                },
                textStyle: {
                  color: '#a9c5ec'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#275a71'
                }
              },
              axisTick: {
                show: false
              },
              splitNumber: 4
            }
          ],
          grid: {
            top: 35,
            left: 46,
            right: 46,
            bottom: 30
            // left: 'center'
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(4,221,239,0.9)'
                  }, {
                    offset: 1,
                    color: 'rgba(4,221,239,0)'
                  }])
                }
              },
              yAxisIndex: 0,
              name: '人数',
              type: 'bar',
              barWidth: 15,
              data: this.laborInfo.map((item, index) => {
                return item.totalNum
              }),
              label: {
                show: true,
                color: '#f2f2f2',
                position: 'top'
              }
            },
            {
              name: '人均工时',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(65,180,122,1)'
                }
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(65,180,122,0.9)'
                  }, {
                    offset: 1,
                    color: 'rgba(65,180,122,0.1)'
                  }])
                }
              },
              data: this.laborInfo.map((item, index) => {
                return item.workHourAvg
              })
            }
          ]
        }
        chart.setOption(echartOption)
      },
      uninit () {
        let chart = this.$echarts.init(this.$refs.chartDOM)
        let echartOption = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['人数', '人均工时'],
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisPointer: {
                type: 'shadow'
              },
              axisLabel: {
                color: '#a9c5ec' // 坐标轴文字颜色
              },
              axisLine: {  //  Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2
                }
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              axisLabel: {
                color: '#a9c5ec'
              },
              nameTextStyle: {
                color: '#a9c5ec'
              },
              axisLine: {   // Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2  // 这里是为了突出显示加上的
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitNumber: 4
            },
            {
              type: 'value',
              name: '人均工时',
              nameTextStyle: {
                color: '#a9c5ec'
              },
              // interval: 1,
              axisLabel: {
                color: '#a9c5ec'
              },
              axisLine: {  //  Y轴颜色
                lineStyle: {
                  color: '#275a71',
                  width: 2 //  这里是为了突出显示加上的
                },
                textStyle: {
                  color: '#a9c5ec'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: '#275a71'
                }
              },
              axisTick: {
                show: false
              },
              splitNumber: 4
            }
          ],
          grid: {
            top: 50,
            left: 46,
            right: 46,
            bottom: 70
            // left: 'center'
          },
          series: [
            {
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(4,221,239,0.9)'
                  }, {
                    offset: 1,
                    color: 'rgba(4,221,239,0)'
                  }])
                }
              },
              yAxisIndex: 0,
              name: '人数',
              type: 'bar',
              barWidth: 15,
              data: []
            },
            {
              name: '人均工时',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: 'rgba(65,180,122,1)'
                }
              },
              areaStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(65,180,122,0.9)'
                  }, {
                    offset: 1,
                    color: 'rgba(65,180,122,0.1)'
                  }])
                }
              },
              data: []
            }
          ]
        }
        chart.setOption(echartOption)
      },
      getAttendanceDailyInfo () {
        let data = {
          stageId: this.currentUser.stageId,
          dateTime: this.currentUser.dateTime
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/panorama/getAttendanceDailyInfo`,
          data: this.$qs.stringify(data)
        }).then(res => {
          if (!res.data.data) {
            this.laborInfo = []
            this.uninit()
            return
          }
          this.laborInfo = res.data.data
          this.init()
        })
      }
    }
  }
</script>

<style>
  .charts_shadow {
    box-sizing: border-box;
    box-shadow: 0 0 20px 5px rgba(71, 159, 205, 0.35) inset;
    background: rgba(6, 60, 87, 0.9);
    height:100%;
    border-radius:6px;
  }
  .until_title_charts{
    border-top-left-radius:6px;
    border-bottom-left-radius:20px;
    background: url(/static/images/bgy-map-title.png) no-repeat;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    color: #cfe2e2;
    padding-left: 20px;
  }
</style>
